<!-- INCLUDE page_header.html -->
<script type="text/javascript" src="/scripts/jquery.history.js"></script>

<!-- INCLUDE primitive_header.html -->

    <p class="action-buttons">{BREADCRUMBS}<span class="actions-menu"><a onclick="return showPopupMenu(event, 'actions-menu');"><span></span></a></span></p>
    <ul id="actions-menu" class="popup-menu">
        <!-- IF U_UPLOAD_PHOTO -->
      <li><a href="{U_UPLOAD_PHOTO}">{L_UPLOAD_PHOTO}</a></li>
        <!-- ENDIF -->
        <!-- IF U_EDIT -->
            <li><a href="{U_EDIT}">{L_EDIT}</a></li>
        <!-- ENDIF -->
        <!-- IF OWNER -->
            <li><a href="{U_MARK_DISPLAY_PIC}">Set as My Picture</a></li>
            <li><a href="{U_MARK_GALLERY_COVER}">Set as Album Cover</a></li>
        <!-- ENDIF -->
        <!-- IF U_EDIT -->
            <li><a href="{U_ROTATE_LEFT}" title="{L_ROTATE_LEFT}">{L_ROTATE_LEFT}</a></li>
            <li><a href="{U_ROTATE_RIGHT}" title="{L_ROTATE_RIGHT}">{L_ROTATE_RIGHT}</a></li>
        <!-- ENDIF -->
        <!-- IF U_DELETE -->
            <li><a href="{U_DELETE}" title="Delete Photo">{L_DELETE}</a></li>
            <!--li><a href="{U_TAG}" title="Tag Photo">Tag</a></li-->
        <!-- ENDIF -->
    </ul>

  <div id="mobile-photo">
    <script type="text/javascript">
      <!--

        $(document).keydown(function(e){
        <!-- IF U_PREVIOUS_PHOTO -->
            if (e.keyCode == 37) { /* left */
                window.location.href = "{U_PREVIOUS_PHOTO}" + parent.location.hash;
                return false;
            }
        <!-- ENDIF -->
        <!-- IF U_NEXT_PHOTO -->
            if (e.keyCode == 39) { /* right */
                window.location.href = "{U_NEXT_PHOTO}" + parent.location.hash;
                return false;
            }
        <!-- ENDIF -->
            if (e.keyCode == 27) { /* escape */
                showNormal();
            }
        });

        $(document).ready(function(){
            if (parent.location.hash == '#hd') {
                showHd();
            }

          $("#display-hd div").click(function(event){
            event.stopPropagation();  
          });

          $(window).resize(function() {
            positionHd();
          });

          $(window).on('orientationchange', function() {
            positionHd();
          });

        });

        function positionHd() {
            $('#photo-hd').css('top', (($('#mobile-hd').height() - Math.min($('#mobile-hd').height(), Math.min($('#mobile-hd').width(), {HD_WIDTH}) * {HD_HEIGHT} / {HD_WIDTH})) / 2) + 'px');
        }

         $(function(){
            $("#photo-mobile").bind('swipeleft', swipeLeftHandler);
            $("#photo-mobile").bind('swiperight', swipeRightHandler);

            function swipeRightHandler( event ){
                <!-- IF U_PREVIOUS_PHOTO -->
                window.location.href = '{U_PREVIOUS_PHOTO}';
                <!-- ENDIF -->
            }

            function swipeLeftHandler( event ){
                <!-- IF U_NEXT_PHOTO -->
                window.location.href = '{U_NEXT_PHOTO}';
                <!-- ENDIF -->
            }


            <!-- IF OWNER -->
            /*function absorbEvent_(event) {
                var e = event || window.event;
                e.preventDefault && e.preventDefault();
                e.stopPropagation && e.stopPropagation();
                e.cancelBubble = true;
                e.returnValue = false;
                return false;
            }

            function preventLongPressMenu(node) {
                node.ontouchstart = absorbEvent_;
                node.ontouchmove = absorbEvent_;
                node.ontouchend = absorbEvent_;
                node.ontouchcancel = absorbEvent_;
            }

            $(document).ready(function(){
                preventLongPressMenu(document.getElementById('photo-mobile'));
            });*/

            $("#photo-mobile").bind('taphold', tapholdHandler);

            function tapholdHandler( e ){
                e.preventDefault();
                $("#photo-menu").show();
                return false;
            }

            document.oncontextmenu = function() {return false;};
            $("#photo-mobile").mousedown(function(e){
                if ( e.button == 2 )
                {
                    e.preventDefault();
                    return false;
                }
                return true;
            });
            <!-- ENDIF -->
         });

        var hdDisplay = '{PHOTO_DISPLAY}';
        var retinaDisplay = '{PHOTO_FULL}';
        var normalDisplay = '{PHOTO_MOBILE}';
		var user_tags = new Array();
	<!-- BEGIN user_tags -->
      user_tags[{user_tags.INDEX}] = new Array({user_tags.TAG_ID}, {user_tags.TAG_X}, {user_tags.TAG_Y});
      <!-- END user_tags -->
      -->
    </script>
    <div id="mobile-hd" onclick="toggleHd()">
        <div><img id="photo-hd" src="{PHOTO_DISPLAY}" style="max-height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" alt="Photo" /></div>
    </div>
    <dl>
      <dt style="text-align: center;">
        <img id="photo-mobile" src="{PHOTO_MOBILE}" alt="Photo" style="max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" onclick="toggleHd()" />
      </dt>
      <!-- IF HAS_USER_TAGS -->
      <dd>
        Tags:
        <ul>
          <!-- BEGIN user_tags -->
          <li onmouseover="ShowUserTag({user_tags.TAG_ID});" onmouseout="HideUserTag({user_tags.TAG_ID});">
            <a href="{user_tags.U_MEMBER}">{user_tags.DISPLAY_NAME}</a>
          </li>
          <!-- END user_tags -->
        </ul>
      </dd>
      <!-- ENDIF -->
      <!-- IF PHOTO_DESCRIPTION -->
      <dd>
        <p>{PHOTO_DESCRIPTION}</p>
      </dd>
      <!-- ENDIF -->
    </dl>
    <div class="comment-pane" style="margin: 0 auto; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
      <!-- INCLUDE pane.comments.html -->
    </div>
    <!-- IF PAGE_LICENSE -->
    <p>
      <!-- IF I_PAGE_LICENSE -->
      <a href="{U_PAGE_LICENSE}">
        <img src="/images/{I_PAGE_LICENSE}" title="{PAGE_LICENSE}" alt="{PAGE_LICENSE}" />
      </a>
      <!-- ELSE -->
      <a href="{U_PAGE_LICENSE}">This page is licensed under the following license: {PAGE_LICENSE}</a>
      <!-- ENDIF -->
      <!-- IF I_PAGE_CLASSIFICATION -->
      <img src="/images/{I_PAGE_CLASSIFICATION}" title="{PAGE_CLASSIFICATION}" alt="{PAGE_CLASSIFICATION}" />
      <!-- ENDIF -->
    </p>
    <!-- ENDIF -->
  </div>
<!-- INCLUDE primitive_footer.html -->
<!-- INCLUDE page_footer.html -->